<template>
  <view :style="[styles]" class="yqd-action options">
    <view
      v-for="(item, index) in attribute.list"
      :key="index"
      class="options-item"
      @click="handleNavigate(item)"
      :class="{ 'options-border': attribute.border }"
    >
      <view class="options-title">{{ item.text }}</view>
      <view class="options-op">
        <u-icon name="arrow-right" size="28rpx" />
      </view>
    </view>
  </view>
</template>

<script>
import { COMPREIFX } from "../../../libs/const/widget";
import { callNavigateHook } from "../../../libs/navigateTo";

export default {
  name: `${COMPREIFX}aciton`,
  props: {
    attribute: Object,
    styles: Object,
  },
  methods: {
    handleNavigate(listItem) {
      if (listItem.navigateType) {
        callNavigateHook({
          type: listItem.navigateType,
          target: listItem
        });
      } else {
        this.$emit("event", {
          eventName: "girdClick",
          attribute: listItem,
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.options {
  font-size: 28rpx;
  background-color: white;
  &-item {
    display: flex;
    align-items: center;
    padding: 20rpx 20rpx;
  }
  &-title {
    flex: 1;
  }
  &-border {
    border-bottom: 1rpx solid whitesmoke;
    &:last-child {
      border-bottom: none !important;
    }
  }
}
</style>
